<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-device_access-container">
      <!-- is login -->
      <div class="vm-device_access-isLogin" v-if="!isLogin">
        <x-button @click.native="$router.push({path: '/addSupplyChain'})" plain type="warn">注册</x-button>
        <x-button type="warn" @click.native="$router.push({path: '/login'})">
          登录
        </x-button>
      </div>

      <!-- Manufacture cloud -->
      <div class="vm-Manufacture-cloud">
        <h5>智能制造SAAS云</h5>
        <ul>
          <li>
            <div class="cloud-h">
              <i class="vm-equipment-icon dtjr"></i>
              <h5>设备数据接入</h5>
            </div>
            <div class="cloud-b">
              <p>设备数据接入是智能化生产的基础，云平台注册企业通过审核后，采用工业网关或边缘计算设备，实现设备数据接入，用户可创建多个实例，实施采集或接收设备数据。</p>
            </div>
          </li>
          <li>
            <div class="cloud-h">
              <i class="vm-equipment-icon gydsh"></i>
              <h5>工业大数据</h5>
            </div>
            <div class="cloud-b">
              <p>设备数据接入后实现设备传感器实时数据，不断积累形成大数据，用于生产制造的设备远程运维、工艺优化管理、降低设备能耗、提高效率、提高产品质量。</p>
            </div>
          </li>
          <li>
            <div class="cloud-h">
              <i class="vm-equipment-icon znhyy"></i>
              <h5>智能化应用</h5>
            </div>
            <div class="cloud-b">
              <p>依托云平台强大的数据分析处理能力，为用户提供设备状态运维和安全预警，定制化的数据分析模型与工业智能融合，深度发掘数据价值，让生产线和设备发挥最大价值。</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Manufacture cloud -->
      <div class="vm-equipment-cloud">
        <h5>设备上云三步走</h5>
        <button-tab>
          <button-tab-item
            selected
            @on-item-click="changeEquipment">1 需求</button-tab-item>
          <button-tab-item
            @on-item-click="changeEquipment">2 接入</button-tab-item>
          <button-tab-item
            @on-item-click="changeEquipment">3 应用</button-tab-item>
        </button-tab>

        <ul class="timeline-container" v-show="EquipmentIndex == 0">
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon xq1"></i>
              <h4>生产大数据的实现</h4>
            </div>
          </li>
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon xq2"></i>
              <h4>设备智能预警、运行曲线、分析与报表等通用应用实现</h4>
            </div>
          </li>
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon xq3"></i>
              <h4>
                个性应用的开发与配置<br/>
                客服咨询热线：<em>400-626-7766</em><br/>
                杜经理：<em>18911771800</em>
              </h4>
            </div>
          </li>
        </ul>

        <ul class="timeline-container" v-show="EquipmentIndex == 1">
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon jq1"></i>
              <h4>购买服务和接入设备、仪表</h4>
            </div>
          </li>
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon jq2"></i>
              <h4>现场设备安装及接入调试</h4>
            </div>
          </li>
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon jq3"></i>
              <h4>
                平台接入设计与联调<br/>
                客服咨询热线：<em>400-626-7766</em><br/>
                杜经理：<em>18911771800</em>
              </h4>
            </div>
          </li>
        </ul>

        <ul class="timeline-container" v-show="EquipmentIndex == 2">
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon yy1"></i>
              <h4>生产大数据的实现</h4>
            </div>
          </li>
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon yy2"></i>
              <h4>设备智能预警、运行曲线、分析与报表等通用应用实现</h4>
            </div>
          </li>
          <li>
            <div class="timeline-item-circular">
              <span class="circular"></span>
            </div>
            <div class="timeline-item-line"></div>
            <div class="timeline-item-content">
              <i class="vm-equipment-icon yy3"></i>
              <h4>
                个性应用的开发与配置<br/>
                客服咨询热线：<em>400-626-7766</em><br/>
                杜经理：<em>18911771800</em>
              </h4>
            </div>
          </li>
        </ul>

      </div>

      <!-- Cloud on device-->
      <div class="vm-device-cloud">
        <h5>智能上云、智能制造核心支撑</h5>
        <button-tab>
          <button-tab-item
            @on-item-click="changeDevice"
            selected>安全保障</button-tab-item>
          <button-tab-item
            @on-item-click="changeDevice">应用价值</button-tab-item>
          <button-tab-item
            @on-item-click="changeDevice">服务成本</button-tab-item>
          <button-tab-item
            @on-item-click="changeDevice">智能边缘网管</button-tab-item>
        </button-tab>
        <div :class="['bg-icon vm-device-item',deviceClass]">
          <i class="vm-equipment-icon"></i>
          <h5 v-show="DeviceIndex == 0">安全保障</h5>
          <h5 v-show="DeviceIndex == 1">应用价值</h5>
          <h5 v-show="DeviceIndex == 2">服务成本</h5>
          <h5 v-show="DeviceIndex == 3">智能边缘网关</h5>
          <p v-show="DeviceIndex == 0">传统的IT安全已经不能满足工业现场设备安全需求，VOCOOR MAPA500边缘云计算数据网关实现了每个I/O通道加密算法，对边缘设备安全、通道安全、不熟安全、数据安全、访问安全等实现了国际最先进的安全架构与策略。客户可以放心接入设备数据。</p>
          <p v-show="DeviceIndex == 1">通过设备数据接入，应用互联网、大数据、云计算、人工智能等方式，直接切入设备运行效能、工艺病灶，产品良品率、设备运维等环节，解决传统的自动化和信息管理缺陷，优化质量、效率、成本、资源等。</p>
          <p v-show="DeviceIndex == 2">价值服务企业追求的目标，数据接入来源生产自动化I/O服务器和opc 服务器，通过以太网成本会低于40元/点，直接对现场仪表接入边缘计算服务，是传统自控投入成本的1/2，我们把企业的效益与投入比不断放大。</p>
          <p v-show="DeviceIndex == 3">VOCOOR MAPA500边缘计算数据数据终端，是目前国际上性能、安全、集成度、易用性最优的工业网关之一，对于自控系统或者现场仪表接入，可以快速无缝对接，集成PLC、4G/NB、WIFI、触摸屏、LUNIX、本地存储、防爆等功能。</p>
          <x-button v-show="DeviceIndex == 0 || DeviceIndex == 3" plain type="primary" @click.native="findDetails(DeviceIndex)" class="custom-primary-red">详情介绍>></x-button>
        </div>
      </div>

      <!-- is login -->
      <div class="vm-device_access-isLogin mb0" v-if="!isLogin">
        <x-button plain type="warn">注册</x-button>
        <x-button type="warn" @click.native="$router.push({path: '/login'})">
          登录
        </x-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { XButton, ButtonTab, ButtonTabItem, Timeline, TimelineItem  } from 'vux'
  import { userIsLogin } from '@/utils/userHandler.js'
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  export default {
    name: "device_access",
    data() {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        DeviceIndex: 0,
        EquipmentIndex: 0,
        isLogin: userIsLogin()
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      XButton,
      ButtonTab,
      ButtonTabItem,
      Timeline,
      TimelineItem
    },
    methods: {
      test () {
        console.log(1);
      },
      changeEquipment (index) {
        this.EquipmentIndex = index;
      },
      // 智能上云、应用价值数据改变
      changeDevice (index) {
        this.DeviceIndex = index;
      },
      // 点击详细介绍
      findDetails (i) {
        if ( i == 0 ) {
          this.$router.push({
            path: '/device_access/safety_guarantee'
          })
        } else if (i == 3) {
          this.$router.push({
            path: '/device_access/intelligent_edge'
          })
        }
      }
    },
    computed: {
      deviceClass () {
        let Dclass = '';
        switch (this.DeviceIndex) {
          case 0:
            Dclass = 'one';
            break;
          case 1:
            Dclass = 'two';
            break;
          case 2:
            Dclass = 'three';
            break;
          case 3:
            Dclass = 'four';
            break;
        }
        return Dclass;
      }
    }
  }
</script>

<style scoped>

i.vm-equipment-icon {
  background: url("../../../static/images/equipment_icon.png") no-repeat;
  background-size: 542px 499px;
  display: inline-block;
}
i.vm-equipment-icon.dtjr {
  background-position: -57px -48px;
  width: 62px;
  height: 44px;
}

.vm-equipment-icon.gydsh {
  width: 62px;
  height: 62px;
  background-position: -57px -131px;
}
.vm-equipment-icon.znhyy {
  width: 58px;
  height: 62px;
  background-position: -61px -232px;
}
.vm-equipment-icon.xq1 {
  width: 48px;
  height: 48px;
  background-position: -217px -108px;
}
.vm-equipment-icon.xq2 {
  width: 48px;
  height: 48px;
  background-position: -148px -324px;
}
.vm-equipment-icon.xq3 {
  width: 48px;
  height: 48px;
  background-position: -216px -43px;
}
.vm-equipment-icon.jq1 {
  width: 48px;
  height: 48px;
  background-position: -148px -180px;
}
.vm-equipment-icon.jq2 {
  width: 48px;
  height: 48px;
  background-position: -148px -108px;
}
.vm-equipment-icon.jq3 {
  width: 48px;
  height: 48px;
  background-position: -148px -43px;
}
.vm-equipment-icon.yy1 {
  width: 48px;
  height: 48px;
  background-position: -216px -108px;
}
.vm-equipment-icon.yy2 {
  width: 48px;
  height: 48px;
  background-position: -148px -324px;
}
.vm-equipment-icon.yy3 {
  width: 48px;
  height: 48px;
  background-position: -216px -43px;
}
.vm-device_access-container {
  height: 100%;
  overflow: scroll;
}
.vm-device_access-container .vm-device_access-isLogin {
  height: 120px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.vm-device_access-container .vm-device_access-isLogin button {
  width: 220px;
  height: 75px;
  border-radius: 5px; /* no */
}
.vm-device_access-container .vm-device_access-isLogin button:first-child {
  margin: 0;
  margin-right: 60px;
  border: 1px solid #F34B50; /* no */
  font-size: 28px;
  color: #F34B50;
}
.vm-device_access-container .vm-device_access-isLogin button:last-child {
  font-size: 28px;
  color: #FFFFFF;
}
.weui-btn + .weui-btn {
  margin: 0;
}

.vm-Manufacture-cloud {
  padding: 65px 75px 50px 75px;
  margin-bottom: 15px;
  background-color: #ffffff;
}
.vm-Manufacture-cloud > h5 {
  position: relative;
  font-size: 32px;
  color: #333333;
}
.vm-Manufacture-cloud > h5::after {
  content: '';
  position: absolute;
  bottom: -20px;
  width: 140px;
  height: 4px;
  border-radius: 2px; /* no */
  background: #F34B50;
  left: 50%;
  margin-left: -70px;
}
.vm-Manufacture-cloud ul {
  margin-top: 20px;
}
.vm-Manufacture-cloud ul > li {
  padding-top: 50px;
  border-bottom: 1px solid #EEEEEE; /* no */
}
.vm-Manufacture-cloud ul li .cloud-h {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vm-Manufacture-cloud ul li .cloud-h > h5 {
  font-size: 28px;
  color: #333333;
  margin-left: 20px;
}
.vm-Manufacture-cloud ul li .cloud-b {
  margin-top: 35px;
  margin-bottom: 40px;
}
.vm-Manufacture-cloud ul li .cloud-b > p {
  font-size: 28px;
  color: #999999;
  text-align: left;
}


.vm-equipment-cloud {
  padding: 65px 100px 50px 100px;
  margin-bottom: 15px;
  background-color: #ffffff;
}
.vm-equipment-cloud > h5 {
  position: relative;
  font-size: 32px;
  color: #333333;
}
.vm-equipment-cloud > h5::after {
  content: '';
  position: absolute;
  bottom: -20px;
  width: 140px;
  height: 4px;
  border-radius: 2px; /* no */
  background: #F34B50;
  left: 50%;
  margin-left: -70px;
}
.vm-equipment-cloud >>> .vux-button-group {
  margin-top: 50px;
}
.vm-equipment-cloud .vux-button-group >>> a {
  height: 60px;
  line-height: 60px;
  color: #f34b50;
  font-size: 26px;
}
.vm-equipment-cloud .vux-button-group >>> a.vux-button-group-current {
  background-color: #f34b50;
  color: #ffffff;
}

.vux-button-group >>> a.vux-button-tab-item-first {
  border-top-left-radius: 15px /* no */;
  border-bottom-left-radius: 15px /* no */;
}
.vux-button-group >>> a.vux-button-tab-item-last {
  border-top-right-radius: 15px /* no */;
  border-bottom-right-radius: 15px /* no */;
}
.vm-equipment-cloud .vux-button-group >>> a:nth-child(2)::after {
  border-left: none;
  border-right: none;
}
.vm-equipment-cloud .vux-button-group >>> a::after {
  border: 1px solid #f34b50; /* no */
}
.vm-equipment-cloud .vux-button-group >>> a.vux-button-group-current::after {
  border: none;
}



.vm-equipment-cloud .timeline-container {
  text-align: left;
  margin-top: 70px;
}
.vm-equipment-cloud .timeline-container > li {
  position: relative;
  overflow: hidden;
}
.vm-equipment-cloud .timeline-container > li:last-child .timeline-item-line {
  display: none;
}
.vm-equipment-cloud .timeline-container .timeline-item-circular {
  position: absolute;
}
.vm-equipment-cloud .timeline-container .timeline-item-circular .circular {
  display: flex;
  width: 25px;/* no */
  height: 25px;/* no */
  background-color: #ffffff;
  border: 1px solid #D3D3D3; /* no */
  padding: 4px; /* no */
  position: relative;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.vm-equipment-cloud .timeline-container .timeline-item-circular .circular::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border: 2px solid #989898; /* no */
  top: 3px; /* no */
  right: 3px; /* no */
  bottom: 3px; /* no */
  left: 3px; /* no */
  border-radius: 50%;
}
.vm-equipment-cloud .timeline-container .timeline-item-line {
  position: absolute;
  width: 2px;/* no */
  border-left: 2px dashed #979797; /* no */
  height: 100%;
  left: 25px;/* no */
  top: 30px;/* no */
  margin-left: -12.5px;/* no */
}
.vm-equipment-cloud .timeline-container .timeline-item-content {
  display: flex;
  font-size: 28px;
  color: #333333;
  text-align: left;
  padding: 0 0 90px 75px;
}
.vm-equipment-cloud .timeline-container .timeline-item-content > h4 {
  line-height: 40px !important;
  flex: 1;
  margin-left: 15px;
}
.vm-equipment-cloud .timeline-container .timeline-item-content h4 > em{
  color: #009dff;
  font-size: 28px;
}

.vm-device-cloud {
  padding: 65px 40px 50px 40px;
  margin-bottom: 15px;
  background-color: #ffffff;
}
.vm-device-cloud > h5 {
  position: relative;
  font-size: 32px;
  color: #333333;
}
.vm-device-cloud > h5::after {
  content: '';
  position: absolute;
  bottom: -20px;
  width: 140px;
  height: 4px;
  border-radius: 2px; /* no */
  background: #F34B50;
  left: 50%;
  margin-left: -70px;
}
.vm-device-cloud >>> .vux-button-group {
  margin-top: 50px;
  margin-bottom: 70px;
}

.vm-device-cloud .vux-button-group >>> a {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f34b50;
  font-size: 26px;
}
.vm-device-cloud .vux-button-group >>> a.vux-button-group-current {
  background-color: #f34b50;
  color: #ffffff;
}

.vm-device-cloud .vux-button-group >>> a.vux-button-tab-item-first {
  border-top-left-radius: 15px /* no */;
  border-bottom-left-radius: 15px /* no */;
}
.vm-device-cloud .vux-button-group >>> a.vux-button-tab-item-last {
  border-top-right-radius: 15px /* no */;
  border-bottom-right-radius: 15px /* no */;
}
.vm-device-cloud .vux-button-group >>> a:nth-child(2)::after {
  border-right: none;
}
.vm-device-cloud .vux-button-group >>> a::after {
  border: 1px solid #f34b50; /* no */
}
.vm-device-cloud .vux-button-group >>> a.vux-button-group-current::after {
  border: none;
}
.vm-device-cloud .vm-device-item {
  width: 672px;
  height: 820px;
  padding: 110px 60px;
}

.vm-device-cloud .bg-icon.vm-device-item.one {
  background: url("../../../static/images/bg01.png");
  background-size: cover;
}
.vm-device-cloud .bg-icon.vm-device-item.one i {
  background-position: -344px -13px;
  width: 90px;
  height: 108px;
}
.vm-device-cloud .bg-icon.vm-device-item.two {
  background: url("../../../static/images/bg02.png");
  background-size: cover;
}
.vm-device-cloud .bg-icon.vm-device-item.two i {
  background-position: -349px -332px;
  width: 98px;
  height: 108px;
}
.vm-device-cloud .bg-icon.vm-device-item.three {
  background: url("../../../static/images/bg03.png");
  background-size: cover;
}
.vm-device-cloud .bg-icon.vm-device-item.three i {
  background-position: -344px -191px;
  width: 108px;
  height: 108px;
}
.vm-device-cloud .bg-icon.vm-device-item.four {
  background: url("../../../static/images/bg04.png");
  background-size: cover;
}
.vm-device-cloud .bg-icon.vm-device-item.four i {
  background-position: -210px -338px;
  width: 108px;
  height: 96px;
}
.vm-device-cloud .vm-device-item > h5{
  font-size: 30px;
  color: #FFFFFF;
  line-height: 30px;
  margin-top: 80px;
  margin-bottom: 45px;
}
.vm-device-cloud .vm-device-item > p{
  font-size: 26px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: left;
  line-height: 36px;
  margin-bottom: 75px;
}
.vm-device-cloud .vm-device-item > button {
  width: 223px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px; /* no */
  border: 1px solid #ffffff; /* no */
  font-size: 26px;
  color: #FFFFFF;
  line-height: normal;
}
</style>
